<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">注册账套</div>
            <el-form  size="mid" :model="param" :rules="rules" class="ms-content" label-width="100px" ref="login">
                <el-form-item prop="name" label="公司/组织名称">
                    <el-input size="small" placeholder="请输入公司/组织名称" tabindex="1" v-model="param.name">
                        <el-button size="small" icon="el-icon-lx-people" slot="prepend"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code" label="账套标识">
                    <el-input size="small" placeholder="请输入账套标识，可以是公司/组织的英文或者拼音" tabindex="1" v-model="param.code">
                        <el-button size="small" icon="el-icon-lx-people" slot="prepend"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="linker_name" label="联系人">
                    <el-input size="small" placeholder="请输入联系人" tabindex="1" v-model="param.linker_name">
                        <el-button size="small" icon="el-icon-lx-people" slot="prepend"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="linker_mobile" label="联系手机">
                    <el-input size="small" placeholder="请输入手机号码" tabindex="1" v-model="param.linker_mobile">
                        <el-button size="small" icon="el-icon-lx-people" slot="prepend"></el-button>
                    </el-input>
                    <el-alert
                        title="请填写真实电话，无法联系的，账套在5个工作日后停用" :closable="false"
                        type="info">
                    </el-alert>
                </el-form-item>
                <el-form-item prop="verifyCode" class="verifyCode" label="验证码">
                    <el-input size="small" @keyup.enter.native="submitForm()" placeholder="请输入验证码" tabindex="3"
                              type="text" v-model="param.verifyCode">
                        <!-- <el-button icon="el-icon-key" slot="prepend"></el-button> -->
                        <el-button size="small" slot="prepend" icon="el-icon-search"></el-button>
                        <img :src="verifyCodeUrl" slot="append" title="点击刷新" alt="" class="verify_img"
                                  @click="refreshVerifyCode" />
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button  size="medium" @click="submitForm()" type="primary">注  册</el-button>
                </div>
                <el-alert
                    :title="accountSetState" :closable="false" v-if="has_check_result"
                    :type="accountSetStateType">
                </el-alert>
            </el-form>
        </div>
    </div>
</template>

<script>
    import common from '@common/api/common';
    import apiConstants from "@common/api/constants";
    import anonApi from "@common/api/anonApi";
    import md5 from 'js-md5';
    import {AES} from '@common/utils/crypto';
    import NProgress from 'nprogress';

    export default {
        data: function () {
            return {
                //是否已经检查结果
                has_check_result:false,
                //检查后的计时（秒)
                check_duration_sec:0,
                //账套状态
                accountSetState:'',
                accountSetStateType:undefined,
                param: {
                    loginId: '',
                    password: '',
                    verifyCode: '',
                },
                isLoginning: false,
                rules: {
                    name: [{required: true, message: '请输入公司/组织名称', trigger: 'blur'},
                        {max: 50,message: "公司/组织名称长度不能超过50位" },],
                    code: [{required: true, message: '请输入账套标识', trigger: 'blur'},
                        {max: 50,message: "账套标识长度不能超过50位" },],
                    linker_name: [{required: true, message: '请输入联系人', trigger: 'blur'},
                        {max: 50,message: "联系人长度不能超过50位" },],
                    linker_mobile: [{required: true, message: '请输入联系电话', trigger: 'blur'},
                        {max: 50,message: "联系电话长度不能超过50位" },],
                    verifyCode: [{required: true, message: '请输入验证码', trigger: 'blur'}],
                },
                verifyBaseUrl: `${window.configs.requestPrefix}${apiConstants.API_GetVerifyCode}?width=80&height=24&fontSize=24`,
                verifyCodeUrl: '',
            };
        },
        mounted () {
            let $this = this;
            NProgress.done();
            this.refreshVerifyCode();
            this.init();
        },
        methods: {
            // 初始化
            init () {
                let $this = this;

            },
            refreshVerifyCode() {
                let $this = this;
                let url = `${$this.verifyBaseUrl}&v=${new Date().getTime()}`;
                common.getData(url, res => {
                    let blob = new Blob([res]);
                    $this.verifyCodeUrl = window.URL.createObjectURL(blob);
                });
            },
            checkAccountState(params){
                let $this = this;
                anonApi.getAccountSetState(params, result =>{
                    $this.check_duration_sec += 3;
                    if (result.data == 2){
                        $this.accountSetState = '创建账套成功'
                        $this.accountSetStateType = 'success'
                        window.setTimeout(()=>{
                            $this.$router.push('/login?code='+params.code);
                        },3000);
                    }else{
                        $this.accountSetState = '正在创建账套--'+$this.check_duration_sec
                        window.setTimeout(()=>{$this.checkAccountState(params)},3000);
                    }
                }, error => {
                    $this.accountSetState = '查询账套账套失败：'+error.message
                    $this.accountSetStateType = 'error'
                }, fail => {
                    $this.accountSetState = '查询账套账套失败：'+fail.message
                    $this.accountSetStateType = 'error'
                });
            },
            submitForm () {
                let $this = this;
                if ($this.isLoginning) {
                    return;
                }
                $this.isLoginning = true;
                this.$refs.login.validate(valid => {
                    if (valid) {
                        let verifySessionId = $this.$utils.getSessionStorage('VerifySession');
                        let subData = $.extend({}, $this.param);
                        if ($this.$utils.isNotEmpty(verifySessionId)) {
                            subData.verifySessionId = verifySessionId;
                        }
                        anonApi.regClient(subData, result =>{
                            $this.isLoginning = false;
                            $this.has_check_result = true
                            $this.accountSetState = '正在创建账套'
                            $this.accountSetStateType = 'info'
                            $this.check_duration_sec = 0;
                            subData.account_set_sid = subData.code;
                            $this.checkAccountState(subData);
                        }, error => {
                            $this.isLoginning = false;
                            $this.$message.error(error.message);
                            $this.refreshVerifyCode();
                            $this.isLoginning = false;
                            $this.accountSetState = '创建失败：'+error.message
                            $this.accountSetStateType = 'error'
                        }, fail => {
                            $this.isLoginning = false;
                            $this.$message.error(fail.message);
                            $this.refreshVerifyCode();
                            $this.isLoginning = false;
                            $this.accountSetState = '创建失败：'+fail.message
                            $this.accountSetStateType = 'error'
                        });
                    } else {
                        this.$message.error('请输入登录账户和密码');
                        $this.isLoginning = false;
                        return false;
                    }
                });
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: 100%;

        .ms-login {
            position: absolute;
            left: 50%;
            width: 550px;
            margin: 20px 0 0 -200px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.3);
            overflow: hidden;

            .ms-title {
                width: 100%;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                color: #409EFF;
                border-bottom: 1px solid #ddd;
                font-weight: bold;
            }
            /deep/ .el-form-item__label{
                color: #FFFFFF;
            }
            .ms-content {
                padding: 30px 30px;
                /deep/.el-input-group__prepend{
                    // padding: 0;
                    // height: 32px;
                    // border: 0;
                    // .el-button{
                    //     // height: 24px;
                    //     border:1px solid #dcdfe6;
                    //     border-radius: 4px;
                    //     background-color: #F5F7FA;
                    //     color: #909399;
                    // }
                }
                .verifyCode {
                    /deep/.el-input-group__append {
                        width: 80px;
                        padding: 0;
                        line-height: 1;
                        height: 24px;
                        border:0;

                        .verify_img {
                            width: 100%;
                            height: 20px;
                        }
                    }
                }

                .login-btn {
                    margin-top: 10px;
                    text-align: center;

                    button {
                        width: 100%;
                        height: 36px;
                        margin-bottom: 10px;
                    }
                }
            }
        }

        .download_area {
            position: fixed;
            top: inherit;
            bottom: 40px;
            user-select: none;
            background: rgba(255, 255, 255);
            width: 220px;
            margin: -190px 0 0 -110px;

            .ms-content {
                text-align: center;
                padding: 10px;

                .el-image {
                    width: 200px;
                }

                .download_tips {
                    display: block;
                    font-size: 20px;
                    line-height: 30px;
                    color: #000;
                    cursor: pointer;

                    &:hover {
                        color: #409EFF;
                    }
                }
            }
        }
        .loginType{
            padding: 10px;
        }
    }
</style>
